<template>
  <template v-for="(item, index) in menus" :key="index">
    <q-expansion-item
      expand-separator
      v-bind="item"
      v-if="item.childen && item.childen.length > 0"
      :header-inset-level="level"
    >
      <expansion-menu :menus="item.childen" :level="level + 1"></expansion-menu>
    </q-expansion-item>
    <q-item v-bind="itemProps(item)" v-else>
      <q-item-section avatar v-if="item.icon">
        <q-icon :name="item.icon" />
      </q-item-section>
      <q-item-section>
        <q-item-label>{{ item.label }}</q-item-label>
        <q-item-label caption lines="2" v-if="item.caption">
          {{ item.caption }}
        </q-item-label>
      </q-item-section>
    </q-item>
  </template>
</template>

<script>
import { computed, defineComponent, reactive } from "vue";

export default defineComponent({
  name: "ComponentsExpansionMenuVue",
  props: {
    menus: Array,
    level: {
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    // console.log(props.menus);
    const data = reactive({});

    function itemProps(item) {
      if (item.href && item.target !== "_blank") {
        item.to = "/iframe?link=" + item.href;
        delete item.tag;
        delete item.target;
        delete item.href;
      }
      // _blank
      return item;
    }
    return { itemProps, data };
  },
});
</script>
